{% extends 'home/public/base.html' %}


{% block 'css' %}
    <link rel="stylesheet" type="text/css" href="/static/home/public/css/cart.css">
    <link rel="stylesheet" type="text/css" href="/static/home/public/css/cart-app.css">
{% endblock %}

{% block 'header-header' %}
<div class="navbar-left">
    <ol class="breadcrumb">
        <li class="active" style="color:red">购物车</li>
        <li>确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>
{% endblock %}

{% block 'con' %}
<hr>
<hr>
<hr>
<div class="mainbody cart">
        <div class="container">
            <!-- 购物车详情头 -->
            <table class="cart-header">
                <tbody>
                    <tr>
                        <td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
                            <div class="cart-select-all JSelectAll">
                                <div class="mz-checkbox"></div>
                                <span class="cart-select-title">全选</span>
                            </div>
                        </td>
                        <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                        <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                        <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                        <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
                        <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">操作</td>
                    </tr>
                </tbody>
            </table><!-- 购物车详情头 E-->
            
            <!-- 购物清单信息列表 -->
            <div class="cart-merchant-list">
                <div class="cart-merchant">
                    <table class="cart-merchant-body">
                        <tbody>
                            {% for v in cart.values %}
                            <tr class="cart-product" id="pro5">
                                <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">  
                                    <div class="mz-checkbox " gid="{{ v.id }}"></div> 
                                    <a href="meilanx.html" class="cart-product-link" target="_blank">
                                        <img src="/static/public/img/{{ v.pic }}" class="cart-product-img" alt="{{ v.title }}">
                                    </a>
                                </td>
                                <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                    <a href="meilanx.html" class="cart-product-link" target="_blank">
                                      <p>{{ v.title }}</p>
                                    </a>
                                   
                                    
                                </td>
                                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                    <p>
                                        <span class="cart-product-price">{{ v.price }}</span>
                                    </p>
                                </td>
                                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                                    <div class="cart-product-number-adder">
                                        <p class="cart-product-number-max show"></p>
                                        <div class="mz-adder">
                                            <button class="mz-adder-subtract"></button>
                                            <div class="mz-adder-num">
                                                <input gid="{{ v.id }}" class="mz-adder-input cartnum" value="{{ v.num }}" type="text">
                                            </div>
                                            <button class="mz-adder-add" ></button>
                                            <!-- <button class="mz-adder-add" onclick="location.href='{% url 'cartedit' %}?gid={{ v.id }}&num='+({{v.num}}+1)"></button> -->
                                        </div>
                                    </div>
                                 
                                </td>
                                {% load pagetag %}
                                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                    <span class="cart-product-price total">{% cheng v.price v.num %}</span>
                                </td>
                                <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
                                    <div class="cart-product-remove">
                                        <a href="{% url 'cartdel' v.id %}">
                                        <span class="glyphicon glyphicon-remove"></span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}

                        </tbody>
                    </table>
                </div>
            </div><!-- 购物清单信息列表 E-->
        </div>
        <!-- 结算详情 -->
        <div class="cart-footer" id="cartFooter">
            <div class="container">
               <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
                   <div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
                        <div class="mz-checkbox"></div>
                        <span class="cart-select-title">全选</span>
                   </div>
                   <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
                   <span class="cart-footer-count">
                        共
                        <span class="cart-footer-num" id="totalCount">5</span>
                        件商品
                   </span>
                </div>
                <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                    <span class="cart-footer-sum">
                        <span class="cart-footer-text">已优惠</span>
                        <span class="cart-footer-num red" id="totalDiscount">0.00</span>
                        <span class="cart-footer-text">元， 合计(不含运费)：</span>
                        <span class="cart-footer-total" id="totalPrice">0.00</span>
                    </span>
                    <div class="mz-btn success" id="cartSubmit" onclick="getGoodsId()">去结算</div>
                    <form id="orderadd" action="{% url 'orderadd' %}" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="ids" values="">
                        
                    </form>
                </div>
            </div>
        </div><!-- 结算详情 E-->
    </div>


{% endblock %}

{% block 'js' %}
<script type="text/javascript">
    // 数量加减,总价计算
    cartAddMin()

    // 空格 层级选择器
    // 逗号,并列选择
    // 属性筛选 $('input[gid=123]')

    // 当点击完加减后,触发一个事件,获取input中的值
    $('.mz-adder button').click(function(){
        // 最新的数量
        n = $(this).parent().find('input').val()
        if(n<=0){
            return;
        }
        // 商品的id
        g = $(this).parent().find('input').attr('gid')

        // 发送ajax请求,修改数量
        $.get('{% url "cartedit" %}',{num:n,gid:g},function(data){
            // 获取所有小计,计算总和
            var totalnum =  0
            $('.total').each(function(){
                totalnum += parseFloat($(this).html())
            })

            $('#totalPrice').html(totalnum)

            
            // console.log(totalnum)

        })

    })

    allSelect()
    
    // 获取选择的id
    function getGoodsId(){
        arr = []
        // 获取已经选中的元素,并获取gid
        $('.checked').each(function(){
            id = $(this).attr('gid')
            if(id){
                arr[arr.length] = id
            }
        })
        // 判断是否选择了商品
        if(arr.length<=0){
            alert('请选择要购买的商品')
            return;
        } 

        // 进行跳转
        // location.href = '{% url "orderadd" %}?ids='+s

        s = arr.join(',')
        $('input[name=ids]').val(s)

        $('#orderadd').submit()
    }


</script>

{% endblock %}